<!DOCTYPE html>
<html>
<head>
	<title>添加子账户</title>
	<!--#include("../../common/common-link.html"){}-->
	<style type="text/css">
		.table-panel .content table{margin: 0 auto;margin-top: 10px;}
		.table-panel .content table tr{height: 49px;}
		.table-panel .content table tr.btns td .btn{width: 123px;outline: none;margin-top:20px;}
		.table-panel .content table tr td .need{color: red;}
		.table-panel .content table tr td.left{text-align: right;}
		.table-panel .content table tr td.right{text-align: left;}
		.table-panel .content table tr td.right .form-control{width:300px;}
		.table-panel .content table tr td.center{text-align: center;}
		.table-panel .content table tr td .input-group{width:320px;}
		.table-panel .content table tr td .type-input-group{width:160px;}
		.table-panel .content table tr td .type-input-group .type-input-group-btn .btn-success{border-left-color: #2cae4c}
	</style>
</head>
<body>
	<div id="container-wrap" style="display:none;">
		<div class="table-panel">
			<div class="header">
				<h4 class="title">添加子账户</h4>
				<div class="btns-group">
					<input type="button" class="btn button" onclick="javascript:window.history.back()" value="返回"/>
				</div>
			</div>
			<div class="content">
				<table>
					<tr>
						<td class="left">邮箱<label class="need">*</label>：</td>
						<td class="right">
							<input class="form-control" :value="form.email" v-model="form.email">
						</td>
					</tr>
					<tr>
						<td class="left">手机号<label class="need">*</label>：</td>
						<td class="right">
							<input class="form-control" :value="form.phone" v-model="form.phone">
						</td>
					</tr>
					<tr>
						<td class="left">密码<label class="need">*</label>：</td>
						<td class="right">
							<input class="form-control" :value="form.password" v-model="form.password">
						</td>
					</tr>
					<tr>
						<td class="left">状态：</td>
						<td class="right">
							<div class="layui-form" v-if="form.status">
								<div id="switch" class="layui-unselect layui-form-switch layui-form-onswitch" lay-skin="_switch"><em>可用</em><i></i></div>
							</div>
							<div class="layui-form" v-else>
								<div id="switch" class="layui-unselect layui-form-switch" lay-skin="_switch"><em>不可用</em><i></i></div>
							</div>
						</td>
					</tr>
					<tr>
						<td class="left">绑定收款码：</td>
						<td class="right">
							<template v-if="paycodes&&paycodes.length>0">
							<div class="input-group type-input-group">
								<div class="input-group-btn type-input-group-btn">
									<button type="button" class="status btn btn-success dropdown-toggle" data-toggle="dropdown">
										<span class="type-txt">{{paycodeTxt}}&nbsp;&nbsp;</span><span class="caret"></span>
									</button>
									<ul class="dropdown-menu dropdown-menu-right" >
										<li v-for="(paycode,index) in paycodes">
											<a href="javascript:void(0)" @click="paycodeSelect(index)">{{paycode.alias}}</a>
										</li>
									</ul>
								</div>
							</div>
							</template>
							<template v-else>无可用收款码</template>
						</td>
					</tr>
					<tr class="btns">
						<td class="center" colspan="2">
							<button type="button" class="btn button ok_btn" @click="submit">提交</button>
							<button type="button" class="btn button cancel_btn" @click="cancel">取消</button>
						</td>
					</tr>
				</table>
			</div>
		</div>
	</div>
</body>
<script type="text/javascript">
	var pageData = {};
	var form={};
	function initVue() {
		form.email='';
		form.phone='';
		form.password='';
		form.paycodeId='';
		form.status=1;
		pageData.form=form;
		pageData.paycodeTxt="请选择";
		new Vue({
			el:"#container-wrap",
			data:pageData
		});
		Vue.nextTick(function() {
			bindEvent();
			$("#container-wrap").show();
		});
	};
	function request(callback) {
		var load_id = util.load();
		util.post({
			url:"getAvailablePaycodes",
			success : function(result) {
				var _paycodes=result.paycodes;
				if(_paycodes&&_paycodes.length>0){
					var _paycode={};
					_paycode.id=0;
					_paycode.alias="---";
					_paycodes.splice(0,0,_paycode);
				}
				pageData.paycodes=_paycodes;
			},
			complete : function() {
				layer.close(load_id);
			}
		},callback);
	};
	function bindEvent(){
		$("#switch").click(processStatus);
	};
	function processStatus(){
		if(form.status){
			form.status=0;
		}else{
			form.status=1;
		}
		Vue.nextTick(function() {
			$("#switch").click(processStatus);
		});
	};
	function paycodeSelect(index) {
		if(index==0){
			pageData.paycodeTxt = "请选择";
			pageData.form.paycodeId = '';
		}else{
			var paycodes=pageData.paycodes;
			for(var i in paycodes){
				var paycode=paycodes[i];
				pageData.paycodeTxt = paycode.alias;
				pageData.form.paycodeId = paycode.id;
			}
		}
	};
	function submit(){
		if($.trim(form.email)==''){
			util.warning("请填写邮箱！");
			return ;
		}else{
			if(!util.checkEmail(form.email)){
				util.warning("不合法的邮箱！");
				return ;
			}
		}
		if($.trim(form.phone)==''){
			util.warning("请填写手机号！");
			return ;
		}else{
			if(!util.checkPhone(form.phone)){
				util.warning("不合法的手机号！");
				return ;
			}
		}
		if($.trim(form.password)==''){
			util.warning("请填写密码！");
			return ;
		}else{
			if(form.password.length<6){
				util.warning("密码应大于6位！");
				return ;
			}
		}
		var load_id = util.load();
		util.post({
			url:"addSub",
			data:form,
			success : function(result) {
				cancel();
			},
			complete : function() {
				layer.close(load_id);
			}
		});
	}
	function cancel(){
		window.history.back();
	};
	function initialize(){
		request(initVue);
	};
</script>
</html>